<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debug Interface</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.5/cdn.min.js" defer></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>
    <style>
        .jsonview {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
            font-size: 14px;
            line-height: 1.4;
        }
        .jsonview .null {
            color: #ff4444;
        }
        .jsonview .bool {
            color: #20a0ff;
        }
        .jsonview .num {
            color: #20a0ff;
        }
        .jsonview .string {
            color: #00b300;
        }
        .jsonview .collapser {
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }
        .jsonview .collapser:hover {
            background-color: #f0f0f0;
        }
        .jsonview .collapsible {
            transition: height 0.2s ease;
        }
        .jsonview .collapsible.collapsed {
            height: 0;
            overflow: hidden;
        }
        .jsonview .level1 {
            padding-left: 20px;
        }
        .jsonview .level2 {
            padding-left: 40px;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen" x-data="{ selectedEndpoint: '' }">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-3xl mx-auto">
            <h1 class="text-3xl font-bold mb-8 text-gray-800">Debug Interface</h1>
            <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                <div class="flex gap-4 items-end">
                    <div class="flex-1">
                        <label for="endpoint" class="block text-sm font-medium text-gray-700 mb-2">
                            Debug Endpoint
                        </label>
                        <select id="endpoint" 
                                x-model="selectedEndpoint"
                                class="block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select endpoint...</option>
                            <option value="/debug/tags">Tags</option>
                            <option value="/debug/documents">Documents</option>
                            <option value="/debug/correspondents">Correspondents</option>
                        </select>
                    </div>
                    <button 
                        @click="fetchData(selectedEndpoint)"
                        :disabled="!selectedEndpoint"
                        class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed">
                        Execute
                    </button>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-700">Response</h2>
                <div id="json-result" class="jsonview"></div>
            </div>
        </div>
    </div>
    <script>
        function fetchData(endpoint) {
            if (!endpoint) return;

            const resultElement = document.getElementById('json-result');
            resultElement.innerHTML = 'Loading data...';

            fetch(endpoint)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    // Initialize JSON TreeView
                    $('#json-result').JSONView(data, {
                        collapsed: false,
                        nl2br: false,
                        recursive_collapser: true
                    });
                })
                .catch(error => {
                    resultElement.innerHTML = `
                        <div class="text-red-500 p-4 bg-red-50 rounded-md">
                            Error loading data: ${error.message}
                        </div>
                    `;
                });
        }

        fetch('/debug')
            .then(response => {
                if (response.status === 503) {
                    document.body.innerHTML = `
                        <div class="min-h-screen flex items-center justify-center bg-gray-100">
                            <div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
                                <h1 class="text-2xl font-bold text-red-500 mb-4">Not Configured</h1>
                                <p class="text-gray-700">The application setup has not been completed yet.</p>
                            </div>
                        </div>
                    `;
                }
            });
    </script>
</body>
</html>